<script setup lang="ts">
import KoDataItem, {
  ComponentType
} from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";

type Prop = {
  label?: string;
  prop?: string;
  rules?: any;
  itemType: ComponentType;
  disabled?: boolean;
  labelWidth?: any;
  required?: boolean;
  bodyClass?: string | string[];
};
const props = withDefaults(defineProps<Prop>(), {
  bodyClass: "w-full"
});
const emit = defineEmits(["onChange"]);
const modelData = defineModel();
</script>

<template>
  <el-form-item
    :label="label"
    :prop="prop"
    :rules="rules"
    :required="required"
    :label-width="labelWidth"
  >
    <div :class="bodyClass">
      <ko-data-item
        v-model="modelData"
        :disabled="disabled"
        :item-type="itemType"
        v-bind="$attrs"
        @on-change="v => emit('onChange', v)"
      />
      <slot />
    </div>
  </el-form-item>
</template>
<style lang="scss" scoped></style>
